<template>
  <div class="jsonMap_wrap">
    <div class="back" v-if="cityName != '中国'" @click="goBack">{{ cityName }} 返回上一级 ></div>
    <MapEchartJson
      ref="son"
      class="MapEchartJson"
      @currentCityList="currentCityList"
      :currentBackName="currentBackName"
      :provinceList.sync="provinceList"
    />
    <!-- <JsonMapHc class="MapEchartJson"/> -->
  </div>
</template>

<script>
import MapEchartJson from '../map/MapEchartJson'
// import JsonMapHc from '@/components/HighEcharts/JsonMapHc'

export default {
  components: {
    MapEchartJson,
    // JsonMapHc
  },
  data() {
    return {
      cityName: '中国',
      cityList: [],
      currentBackName: '',
    }
  },
  props: ['provinceList'],
  methods: {
    childReturn() {
      this.$refs.son.sonReturn()
    },
    currentCityList(e) {
      // console.log('currentCityList', e);
      this.cityList = e
      this.getCityName()
    },
    getCityName() {
      this.cityName = ''
      this.cityList.forEach((item, index) => {
        if (index !== this.cityList.length - 1) {
          this.cityName += item + '-'
        } else {
          this.cityName += item
        }
      })
      this.currentBackName = this.cityList[this.cityList.length - 1]
    },
    goBack() {
      // console.log('111')
      this.cityList.splice(this.cityList.length - 1, 1)
      this.currentBackName = this.cityList[this.cityList.length - 1]

      // console.log('cityList', this.cityList)
      // console.log('currentCityName', this.currentBackName)
      this.$bus.emit('currentCityName', this.currentBackName, this.cityList.length, this.cityList)
      this.$bus.emit('currentCityNameHeader', this.currentBackName, this.cityList.length)
      this.$bus.emit('currentCityData', this.currentBackName)
      this.getCityName()
    },
  },
}
</script>

<style scoped>
.jsonMap_wrap,
.MapEchartJson {
  width: 100%;
  height: 100%;
  position: relative;
  /* border: 2px solid orange; */
}
.back {
  position: absolute;
  font-size: 25px;
  line-height: 25px;
  top: 0px;
  /* top: 50px; */
  right: 120px;
  color: #a3f2f8;
  cursor: pointer;
  z-index: 200;
}
</style>
